<template>
  <a-row class="fedbackContent">
    <!-- 触发弹窗的按钮 -->
    <a-col>
      <span @click="showFeedbackForm" style="font-size: 16px">上传头像</span>
    </a-col>
    <!-- 弹窗 -->
    <a-modal
      v-model:visible="popupVisible"
      ok-text="确认"
      cancel-text="关闭弹窗"
      @cancel="closefn"
      @ok="closefn"
      class="feedbackModal"
    >
      <template #title>
        <div
          style="
            width: 100%;
            text-align: center;
            border-bottom: 1px solid #e8e8e8;
            padding-bottom: 8px;
          "
        >
          上传头像
        </div>
      </template>
      <!-- 下拉框选择反馈类型 -->

      <div>
        <el-upload
          :action="`${uploadUrl}`"
          :headers="{ Authorization: userStore.accessToken }"
          name="file"
          :show-file-list="false"
          :before-upload="uploadBefore"
          accept="image/png, image/jpeg, image/jpg"
          :on-success="uploadSuccess"
          class="avatar-uploader"
        >
          <img :src="userStore.avaterUrl" class="avatar" v-if="userStore.avaterUrl"/>
          <UserOutlined v-else class="avatar-uploader-icon"/>
          <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
        </el-upload>
      </div>
    </a-modal>
  </a-row>
</template>
  
  <script setup>
import { ref, onMounted } from "vue";
import { defineProps } from "vue";
import { Edit } from "@element-plus/icons-vue";
import { message, Modal, Select, Textarea, Button } from "ant-design-vue";
import http from "@/request";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/stores/user";
import { noticStore } from "@/stores/notic";
import logo from "@/assets/image/yitongguo.png";
import {
  UserOutlined,
} from '@ant-design/icons-vue';
// 定义变量

const userStore = useUserStore();

const uploadUrl = `${http.defaults.baseURL}/resource/uploadAvatar`; // 上传地址

const popupVisible = ref(false);

const props = defineProps({
  feedbackTitle: {
    type: String,
    default: "系统异常反馈",
  },
  feedbackButtonText: {
    type: String,
    default: "反馈异常",
  },
  // 是否显示问题ID
  questionId: {
    type: [String, Number],
    default: null,
  },
});
//获取系统反馈类型
onMounted(async () => {});

// 显示反馈表单
const showFeedbackForm = () => {
  popupVisible.value = true;
};
const closefn = () => {
  popupVisible.value = false;
};
function uploadBefore(rawFile) {
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png" && rawFile.type !== "image/jpg") {
    ElMessage.error("只允许 jpg、jpeg、png 格式");
    return false;
  }
  if (rawFile.size / 1024 > 2048) {
    ElMessage.error("最大2兆");
    return false;
  }

  return true;
}

// 上传成功处理
function uploadSuccess(response, uploadFile, uploadFiles) {
console.log(response,'+++');
  if(response.code === 200) {
    userStore.avaterUrl = response.data;
    ElMessage.success("上传成功");
  }else{
    ElMessage.error("上传失败");
  }
}
// 提交反馈

</script>
  
  <style lang="scss" scoped>
.fedbackContent {
  .ant-modal-dialog {
    width: 650px;
  }
  .select {
    width: 98%;
    margin-bottom: 36px;
  }

  .content {
    margin-left: 26px;
    font-size: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}
.input {
  width: 98%;
  margin-bottom: 40px;
  margin-top: 22px;
}
.feedbackModal {
  ::v-deep .ant-modal .ant-modal-title {
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
  }
}
.avatar-uploader .avatar {
  // elementui例子样式
  width: 178px;
  height: 238px;
  display: block;/* 设置圆形头像框 */
  object-fit: cover; /* 图片填充头像框 */
}
.avatar-uploader-icon{
  font-size: 48px;
  margin-top: 12px;
}
:deep(.avatar-uploader .el-upload) {

  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>